<template>
  <div class="btns">
    <div class="consult-service">咨询客服</div>
    <div class="learn-more">了解更多</div>
  </div>
</template>

<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .btns
    width: 290px
    div
      width: 128px
      height: 32px
      line-height: 32px
      font-size: 16px
      display: inline-block
      border-radius: 4px
      text-align: center
    .consult-service
      background: #F57033
      color: #fff
      border: 1px transparent solid
      margin-right: 20px
    .learn-more
      color: #F57033
      border: 1px #F57033 solid
@media screen and (min-width: 750px)
  .btns
    width: 590px
    height: 52px
    div
      width: 280px
      height: 52px
      line-height: 52px
      text-align: center
      font-size: 18px
      display: inline-block
      border-radius: 4px
      cursor: pointer
    .consult-service
      background: #F57033
      color: #fff
      border: 1px transparent solid
      margin-right: 20px
      box-shadow: 0px 4px 16px rgba(245, 112, 51, 0.5)
    .consult-service:hover
      @media screen and (min-width: 750px)
        background: #D6551A
    .learn-more
      color: #F57033
      border: 1px #F57033 solid
    .learn-more:hover
      @media screen and (min-width: 750px)
        background: #F5703330
</style>
